<template>
  <div class="artworks">
    <div class="_home_main">
      <div class="_home_name">My Artworks</div>
      <div class="_home_name1">
<!--        <div></div>-->
<!--        <div>BSC</div>-->
      </div>
<!--      <div class="_art_1">To ensure the safety of your assets, please revoke old contract approvals by clicking <a-->
<!--          href="">HERE.</a>-->
<!--      </div>-->
      <div class="_atr_tbs">
        <div :class="current === 'Collections'?'_active_tabs':''" @click="current = 'Collections'">Collections</div>
        <div :class="current === 'OnSale'?'_active_tabs':''" @click="current = 'OnSale'">On Sale</div>
        <div :class="current === 'History'?'_active_tabs':''" @click="current = 'History'">History</div>
      </div>
      <div class="_atr_tas_main">
        <component :is="comElement[current]"></component>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref,reactive,markRaw } from 'vue';
  import Collections from './common/Collections/Collections.vue'
  import History from './common/History/History.vue'
  import OnSale from './common/OnSale/OnSale.vue'
  import http from "../../http";
  import {connect, getAddress, listNft} from "../../dapp";
  import {NFT_ADDRESS} from "../../abi";

  let current = ref('Collections')
  let comElement = markRaw({
      Collections,
      History,
      OnSale
  })


  async function init() {
  }

  init()

</script>

<style scoped lang="scss">
  ._home_name {
    font-size: 50px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #393939;
    text-align: center;
  }

  ._home_name1 {
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: center;

    div {
      &:nth-child(1) {
        border-radius: 50%;
        width: 38px;
        height: 38px;
        background: url("@/assets/logo1.png") no-repeat center;
        background-size: cover;
      }

      &:nth-child(2) {
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #383838;
        margin-left: 8px;
      }
    }
  }

  ._art_1 {
    width: 837px;
    /*padding: 17px 111px;*/
    height: 53px;
    margin: 0 auto;
    background: #FFFCF5;
    font-size: 14px;
    text-align: center;
    line-height: 53px;
    color: #383838;
    margin-top: 106px;

    a {
      color: #FDC945;
      font-size: 14px;
    }
  }

  ._active_tabs {
    color: #FCC33C!important;
    cursor: pointer;
  }
  ._atr_tbs {
    display: flex;
    align-items: center;
    margin-top: 32px;

    div {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #383838;
      height: 19px;
      line-height: 19px;
      cursor: pointer;

      &:nth-child(1) {
        padding-right: 18px;
      }

      &:nth-child(2) {
        padding: 0 17px;
        border-left: 1px solid #979797;
        border-right: 1px solid #979797;
      }

      &:nth-child(3) {
        padding-left: 18px;
      }
    }
  }

  ._atr_tas_main {
    margin-top: 34px;
  }
</style>
